/*
 * Copyright Thoughtworks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { MithrilViewComponent } from "jsx/mithril-component";
import m from "mithril";
import Stream from "mithril/stream";
import { ButtonGroup, Cancel, Primary } from "views/components/buttons";
import { Form, FormBody } from "views/components/forms/form";
import { CheckboxField, NumberField } from "views/components/forms/input_fields";
import { OperationState } from "views/pages/page_operations";
import styles from "views/pages/server-configuration/index.scss";
import { JobTimeoutAttrs } from "views/pages/server_configuration";
import { i18n } from "helpers/i18n";

export class JobTimeoutConfigurationWidget extends MithrilViewComponent<JobTimeoutAttrs> {
  private ajaxOperationMonitor = Stream<OperationState>(OperationState.UNKNOWN);

  oninit(vnode: m.Vnode<JobTimeoutAttrs>) {
    // 设置当前页面上下文
    i18n.setCurrentPage("server-config");
  }

  view(vnode: m.Vnode<JobTimeoutAttrs>): m.Vnode {
    const jobTimeout = vnode.attrs.defaultJobTimeoutVM().entity();
    return (
      <div data-test-id="job-timeout-management-widget" class={styles.formContainer}>
        <FormBody>
          <div class={styles.formHeader}>
            <h2>{i18n.tSyncForPage("admin.server.config.job.timeout.title", "server-config")}</h2>
          </div>
          <div class={styles.formFields}>
            <Form compactForm={true}>
              <CheckboxField
                dataTestId="checkbox-for-job-timeout"
                property={jobTimeout.neverTimeout}
                label={i18n.tSyncForPage("admin.server.config.job.timeout.never.timeout", "server-config")}
                onchange={() => jobTimeout.defaultJobTimeout(0)}
              />
              <NumberField
                label={i18n.tSyncForPage("admin.server.config.job.timeout.default.timeout", "server-config")}
                helpText={i18n.tSyncForPage("admin.server.config.job.timeout.default.timeout.help", "server-config")}
                readonly={jobTimeout.neverTimeout()}
                property={jobTimeout.defaultJobTimeout}
                required={true}
                errorText={jobTimeout.errors().errorsForDisplay("defaultJobTimeout")}
              />
            </Form>
          </div>
          <div class={styles.buttons}>
            <ButtonGroup>
              <Cancel
                data-test-id={"cancel"}
                ajaxOperationMonitor={this.ajaxOperationMonitor}
                onclick={() => vnode.attrs.onCancel(vnode.attrs.defaultJobTimeoutVM())}
              >
                {i18n.tSyncForPage("admin.server.config.common.buttons.cancel", "server-config")}
              </Cancel>
              <Primary
                data-test-id={"save"}
                ajaxOperation={() => vnode.attrs.onDefaultJobTimeoutSave(jobTimeout)}
                ajaxOperationMonitor={this.ajaxOperationMonitor}
              >
                {i18n.tSyncForPage("admin.server.config.common.buttons.save", "server-config")}
              </Primary>
            </ButtonGroup>
          </div>
        </FormBody>
      </div>
    );
  }
}
